import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import {
  ElDialog,
  ElButton,
  ElTable,
  ElTableColumn,
  ElLink,
  ElRow,
  ElCol,
  ElInput
} from 'element-plus'
import AliIcon from '~/components/AliIocn'

export default defineComponent({
  props: ['cancel', 'visible'],
  emits: ['submitForm'],
  setup(props, { emit }) {
    const store = useStore()
    const state = reactive({
      list: [],
      name: ''
    })
    //  提交
    const submitForm = (row: any) => {
      emit('submitForm', row)
      props.cancel()
    }
    //  取消
    const resetForm = () => {
      props.cancel()
    }
    //  配电设施
    const index = async () => {
      try {
        const { data } = await store.dispatch('equipment/SelectBoxListByName', { name: state.name })
        state.list = data
      } catch (error) {}
    }
    onMounted(() => {
      index()
    })

    return () => (
      <ElDialog
        title="选择配电设施"
        modelValue={props.visible}
        beforeClose={props.cancel}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        width={750}
        v-slots={{
          footer: () => (
            <>
              <ElButton onClick={resetForm}>取消</ElButton>
              <ElButton type="primary" onClick={submitForm}>
                确定
              </ElButton>
            </>
          )
        }}
      >
        <ElRow>
          <ElCol span={8}>
            <ElInput v-model={state.name} placeholder="设施名称" clearable></ElInput>
          </ElCol>
          <ElCol span={1}></ElCol>
          <ElCol span={8}>
            <ElButton type="primary" onClick={index}>
              搜索
            </ElButton>
          </ElCol>
        </ElRow>
        <div style="height: 20px;"></div>
        <ElTable data={state.list}>
          <ElTableColumn prop="name" label="配电设施名称" />
          <ElTableColumn prop="workAreaName" label="所属工区" />
          <ElTableColumn prop="address" showOverflowTooltip label="地址" />
          <ElTableColumn
            label="操作"
            v-slots={{
              default: ({ row }: any) => (
                <ElLink type="primary" onClick={() => submitForm(row)}>
                  <AliIcon type="icon-jingbaochaxun1" />
                  &nbsp; 选择
                </ElLink>
              )
            }}
          />
        </ElTable>
      </ElDialog>
    )
  }
})
